<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" :width="450" destroy-on-close @closed="$emit('closed')">
        <el-tree ref="menuRef" class="menu" :data="props.menus" node-key="id" :props="menuProps" :current-node-key="currentNodeKey"
            :default-expanded-keys="[0]" highlight-current accordion
            @node-click="menuClick"></el-tree>
        <template #footer>
            <el-button @click="visible = false">{{ $t('common.cancel') }}</el-button>
            <el-button type="primary" :loading="isSaveing" @click="submit">{{ $t('common.confirm') }}</el-button>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref, reactive } from 'vue';
import api from '@/api';
import { ElMessage } from 'element-plus';
// 接收父组件传递的 menus 菜单数据
const props = defineProps({ menus: Array });
// 定义用于发射方法
const emit = defineEmits(['success', 'closed']);
// 定义弹出窗口响应数据
const titleMap = reactive({ move: '移动至' });
const mode = ref('move');
const visible = ref(false);
// 定义菜单响应数据
const menuRef = ref(null);
const menuProps = reactive({ value: "id", label: "name" });
const currentNodeKey = ref(0);
// 定义保存按纽加载响应数据
const isSaveing = ref(false);
// 定义表单响应数据
const form = reactive({ ids: '', pid: 0});
// 定义激活窗口响应方法
const open = (newMode = 'move') => {
    mode.value = newMode;
    visible.value = true;
};
// 定义菜单点击响应方法
const menuClick = (node, event) => {
    if (node.id === 0 || event.childNodes.length !== 0) {
        event.expanded = true;
    }
    form.pid = node.id;
};
// 定义提交响应方法
const submit = async () => {
    isSaveing.value = true;
    console.log(form);
    const res = await api.common.folder.move.post(form);
    if (res.code === 200) {
        emit('success');
        ElMessage.success(res.message);
        visible.value = false;
    } else {
        ElMessage.error(res.message);
    }
    isSaveing.value = false;
};
// 定义注入数据
const setData = (data) => {
    form.ids = data.id;
}
defineExpose({ open, setData });
</script>